<template>
  <div>
    <div v-for="item in dataList" :key="item.value" :class="['drop','flx-row', 'hcolorRed',item.select ? 'active' : '']" @click="selectAction(item)">
      <i v-if="item.icon" :class="item.icon" />
      <p v-if="item.name">{{ item.name }}</p>
      <div>{{ item.value }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SelectItem',
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    selectAction(item) {
      this.$emit('selectAction', item)
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin pdStyle{
  margin-right: 10px;
  padding-left: 10px;
}
.drop{
    height: 33px;
    i{
       @include pdStyle;
    }
    p{
        @include pdStyle;
    }
}
.active{
    color: #f5222d;
    background: #fde1e17a;
}
</style>
